import "antd/dist/antd.css";
import React, { Component } from "react";
import { connect } from "react-redux";
import { Layout, Menu, Icon } from "antd";
import { isEqual } from "lodash";
import image from "./new_logan_logo_white.png";
import "./style.scss";
import ImageA from "./查看日志.png"
import ImageB from "./崩溃分析 (1).png"
import ImageC from "./卡顿分析 (1).png"
import ImageD from "./原生页面 (1).png"
import ImageE from "./H5页面监测分析 (1).png"
import ImageF from "./启动分析 (1).png"
import ImageG from "./om.png"
import ImageH from "./自定义异常 (1).png"
import ImageI from "./网络分析.png"
const pathMap = {
  "/native-list": "0",
  "/native-log-detail": "0",
  "/web-list": "1",
  "/web-detail": "1",
  "/crash-list": "2",
  "/crash-detail": "2",
  "/lag-list": "3",
  "/lag-log-detail": "3",
  "/page-analysis-list": "4",
  "/page-analysis-detail": "4",
  "/page-h5-analysis-list": "12",
  "/page-h5-analysis-detail": "12",
  "/launch-list": "5",
  "/launch-detail": "5",
  "/oom-list": "6",
  "/oom-log-detail": "6",
  "/exception-list": "7",
  "/exception-log-detail": "7",
  "/network-list": "8",
  "/network-detail": "8",
  "/memory-list": "9"
};

class Sider extends Component {

  state = {
    selectedKeys: ["0"]
  };

  render() {
    return (
      <Layout.Sider style={style.sider} trigger={null}>
        <div>
          <div className="sider-logo" style={style.logo} />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={["0"]} selectedKeys={this.state.selectedKeys} onClick={this.handleMenuClick}>
            <Menu.Item key="0">
              {/* <Icon type="mobile" /> */}
              <img src={ImageA} alt="" className="img" />
              <span>Native日志</span>
            </Menu.Item>
            {/* <Menu.Item key="1">
              <Icon type="html5" />
              <span>Web日志</span>
            </Menu.Item> */}
            <Menu.Item key="2">
              <img src={ImageB} alt="" className="img" />
              <span>崩溃分析</span>
            </Menu.Item>
            <Menu.Item key="3">
              <img src={ImageC} alt="" className="img" />
              <span>卡顿分析</span>
            </Menu.Item>
            <Menu.Item key="4">
              <img src={ImageD} alt="" className="img" />
              <span>原生页面性能分析</span>
            </Menu.Item>
            <Menu.Item key="12">
              <img src={ImageE} alt="" className="img" />
              <span>H5页面性能分析</span>
            </Menu.Item>
            <Menu.Item key="5">
              <img src={ImageF} alt="" className="img" />
              <span>启动分析</span>
            </Menu.Item>
            <Menu.Item key="6">
              <img src={ImageG} alt="" className="img" />
              <span>OOM分析</span>
            </Menu.Item>
            <Menu.Item key="7">
              <img src={ImageH} alt="" className="img" />
              <span>自定义异常</span>
            </Menu.Item>
            <Menu.Item key="8">
              <img src={ImageI} alt="" className="img" />
              <span>网络分析</span>
            </Menu.Item>
            {/* <Menu.Item key="9">
              <Icon type="mobile" />
              <span>内存分析</span>
            </Menu.Item>
            <Menu.Item key="10">
              <Icon type="mobile" />
              <span>ANR分析(未开通)</span>
            </Menu.Item>
            <Menu.Item key="11">
              <Icon type="mobile" />
              <span>电量分析(未开通)</span>
            </Menu.Item> */}
          </Menu>
        </div>
      </Layout.Sider>
    );
  }

  componentDidMount() {
    const { pathname } = this.props;
    this.setState({ selectedKeys: [pathMap[pathname] || "0"] });
  }

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    return !isEqual(nextState, this.state) || !isEqual(nextProps, this.props);
  }


  componentDidUpdate(prevProps, prevState, snapshot) {
    const { pathname } = this.props;
    this.setState({ selectedKeys: [pathMap[pathname] || "0"] });
  }

  handleMenuClick = ({ key }) => {
    const menuMap = {
      "0": "#/native-list",
      "1": "#/web-list",
      "2": "#/crash-list",
      "3": "#/lag-list",
      "4": "#/page-analysis-list",
      "12": "#/page-h5-analysis-list",
      "5": "#/launch-list",
      "6": "#/oom-list",
      "7": "#/exception-list",
      "8": "#/network-list",
      "9": "#/memory-list"
    };

    const selectedKeysMap = {
      "0": ["0"],
      "1": ["1"],
      "2": ["2"],
      "3": ["3"],
      "4": ["4"],
      "5": ["5"],
      "6": ["6"],
      "7": ["7"],
      "8": ["8"],
      "9": ["9"],
      "12": ["12"]
    };

    window.location.hash = menuMap[key] || "#/native-list";
    this.setState({ selectedKeys: selectedKeysMap[key] || ["1"] });
  }
}

const style = {
  sider: {
    height: "100%"
  },
  logo: {
    backgroundImage: image,
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
    color: "#ffffff",
    textAlign: "center",
    lineHeight: "32px",
    // height: "80px",
    height: "63px",
    margin: "5px",
    cursor: "pointer"
  }
};


function mapStateToProps(state) {
  return {
    pathname: state.router.location.pathname,
    search: state.router.location.search,
    hash: state.router.location.hash,
  }
}

export default connect(mapStateToProps)(Sider);
